<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from "@/utils/axios.js"

const router = useRouter();

// 表单数据
const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 显示/隐藏密码
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const loading = ref(false);

// 切换密码可见性
const toggleShow = (type) => {
  switch(type) {
    case 'old':
      showOldPassword.value = !showOldPassword.value;
      break;
    case 'new':
      showNewPassword.value = !showNewPassword.value;
      break;
    case 'confirm':
      showConfirmPassword.value = !showConfirmPassword.value;
      break;
  }
};

// 密码强度验证
const validatePassword = (val) => {
  return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,20}$/.test(val);
};

// 确认密码验证
const validateConfirm = (val) => {
  return val === form.value.newPassword;
};

const zero =()=>{
  form.oldPassword=''
      form.newPassword=''
      form.confirmPassword=''
}
const us = JSON.parse(sessionStorage.getItem("user"));

// 提交表单
const onSubmit = () =>{
  axios.get(`api/users/changePassword/${form.oldPassword}/${form.newPassword}/${us.userId}`)
      .then(res => {
        if(res.code ===200){
          ElMessage({
            message:"修改成功~",
            type:"success",
            duration:1400,
          })
        }else{
          ElMessage({
            message:res.msg,
            type:"error",
            duration:1400,
          })
        }
      })
}

// 取消操作
const onCancel = () => {
  ElMessage({
    message: '放弃修改讲返回上一级并且所有更改将不会保存',
    type: 'warning'
  })
    router.go(-1); // 返回上一页
};
</script>

<template>
  <!-- 导航栏 -->
  <van-nav-bar
      title="账户安全"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  /><div style="height: 46px;"></div>
  <div class="password-change-container">
    <!-- 标题 -->
    <h2 class="form-title">修改密码</h2>

    <!-- 密码修改表单 -->
    <van-form @submit="onSubmit" class="password-form">
      <!-- 原密码 -->
      <van-field
          v-model="form.oldPassword"
          label="原密码"
          placeholder="请输入当前密码"
          :rules="[{ required: true, message: '请输入原密码' }]"
          :type="showOldPassword ? 'text' : 'password'"
          right-icon="eye"
          @click-right-icon="toggleShow('old')"
      />

      <!-- 新密码 -->
      <van-field
          v-model="form.newPassword"
          label="新密码"
          placeholder="8-20位字母/数字/符号组合"
          :rules="[
          { required: true, message: '请输入新密码' },
          { validator: validatePassword, message: '密码需8-20位且包含字母和数字' }
        ]"
          :type="showNewPassword ? 'text' : 'password'"
          right-icon="eye"
          @click-right-icon="toggleShow('new')"
      />

      <!-- 确认密码 -->
      <van-field
          v-model="form.confirmPassword"
          label="确认密码"
          placeholder="请再次输入新密码"
          :rules="[
          { required: true, message: '请确认新密码' },
          { validator: validateConfirm, message: '两次输入密码不一致' }
        ]"
          :type="showConfirmPassword ? 'text' : 'password'"
          right-icon="eye"
          @click-right-icon="toggleShow('confirm')"
      />

      <!-- 按钮组 -->
      <div class="button-group">
        <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
        >
          提交修改
        </van-button>
        <van-button
            round
            block
            plain
            type="default"
            class="cancel-btn"
            @click="onCancel"
        >
          取消
        </van-button>
      </div>
    </van-form>
  </div>
</template>



<style scoped>
.password-change-container {
  padding: 24px;
  max-width: 500px;
  margin: 0 auto;
}

.form-title {
  text-align: center;
  margin-bottom: 32px;
  color: var(--van-text-color);
}

.password-form {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.button-group {
  margin-top: 32px;
}

.cancel-btn {
  margin-top: 16px;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .password-change-container {
    padding: 16px;
  }
}
</style>